<script setup lang="ts">
import TaskHandle from "../components/task/handler/task.vue";

import { ref, reactive, onMounted } from "vue";

import { getTask, queryMineTask } from "../api/task";

import pagination from "../components/pagination.vue";
import { Picture, DocumentCopy, Position } from "@element-plus/icons-vue";
import { copyToBoard, isNotBlank } from "../utils/objutil";

const loading = ref(false);
const total = ref(0);

const copy = (value) => {
  copyToBoard(value);
};

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
});

const roleList = ref();

const taskHandler = ref();
/**
 * 点击开始处理
 * @param row
 */
const deal = (row) => {
  getTask(row.taskId).then((res) => {
    var d = {
      taskId: row.taskId,
      processInstanceId: row.processInstanceId,
      flowId: row.flowId,
    };

    taskHandler.value.deal(d);
  });
};

//流程编码的表格宽度
const processInstanceBizCodeWidth = ref(200);

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  queryMineTask(queryParams)
    .then(({ data }) => {
      for (var itm of data.records) {
        let number = itm.processInstanceBizCode?.length * 12;
        if (number > processInstanceBizCodeWidth.value) {
          processInstanceBizCodeWidth.value = number;
        }
      }
      roleList.value = data.records;
      total.value = Number(data.total);
    })
    .finally(() => {
      loading.value = false;
    });
}
import {
  LocationQuery,
  LocationQueryValue,
  useRoute,
  useRouter,
} from "vue-router";

const route = useRoute();

onMounted(() => {
  handleQuery();

  const query: LocationQuery = route.query;

  if (isNotBlank(query.taskId)) {
    //跳转过来的
    deal({ taskId: query.taskId });
  }
});
</script>

<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="roleList"
        highlight-current-row
        border
      >
        <el-table-column label="分组" prop="groupName" min-width="100" />
        <el-table-column label="流程" prop="processName" min-width="200" />
        <el-table-column
          label="编码"
          prop="processInstanceBizCode"
          :width="processInstanceBizCodeWidth"
        >
          <template #default="scope">
            <el-text>
              <el-icon @click="copy(scope.row.processInstanceBizCode)">
                <DocumentCopy />
              </el-icon>
              {{ scope.row.processInstanceBizCode }}
            </el-text>
          </template>
        </el-table-column>
        <el-table-column label="发起人" prop="rootUserName" width="150" />
        <el-table-column label="发起时间" prop="startTime" width="180" />
        <el-table-column label="当前节点" prop="taskName" width="150" />
        <el-table-column label="任务时间" prop="taskCreateTime" width="180" />

        <el-table-column fixed="right" width="100" label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              link
              @click="deal(scope.row)"
            >
              <el-icon>
                <Position />
              </el-icon>
              开始处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
    <task-handle ref="taskHandler" @taskSubmitEvent="handleQuery"></task-handle>
  </div>
</template>
